var React=require('react');
var ReactDOM=require('react-dom');
var title="helloReact";

//声明一个组件 组件的首字母要大写
/*var MyComponent=React.createClass({
	render:function(){		
		return(
				<div>
					<h1>我是一个组件</h1>
					<h2>我是组件的h2</h2>
				</div>
		)
	}
})*/




var TodoApp=React.createClass({
	getInitialState:function(){
		return{
			list:[]
		}
	},

	//请求服务端数据的方法
	getData:function(){
		var that=this;
		$.get('http://route.showapi.com/213-4',{
			showapi_appid: 26444,
            showapi_sign: 'e6ed68d43d734b78892a649fedd90cbe',
            topid: 5
		},function(res){
			if(res&&res.showapi_res_code == 0){
				var songlist=res.showapi_res_body.pagebean.songlist.splice(0, 5);

				that.setState({
					list:songlist
				})
			}
		},'json')
	},
	addTodo:function(){
		var value=this.refs.content.value;
		var listData=this.state.list;
		listData.push(value);
		this.setState({
			list:listData
		})
	},
	render:function(){
		return(
			<div>
				<h1>TodoA胖胖</h1>
				<input type="text" ref="content"/>
				<button onClick={this.addTodo}>添加</button>
				<button onClick={this.getData}>从服务器获取数据</button>
				<TodoList list={this.state.list} />
			</div>
		)
	}
})

var TodoList=React.createClass({
	render:function(){
		console.log(this.props.list);
		return(
			<ul>
				{
					this.props.list.map(function(item){
					return (
						<div>
							<li>{item.songname}</li>
							<li>{item}</li>
						</div>						
						)
					})
				}				
			</ul>
		)
	}
})

ReactDOM.render(
	<TodoApp/>,
	document.getElementById('box')
)